<template>
	<view class="page">
		<view class="curved_box">
			<view class="text_cover">
				<!-- 保存按钮 -->
				<image class="titleImg" src="../../static/submit.png" @click="submit"></image>
				<view>
					<form class="form">
						<input class="formItem" name="titile" @input="clicktitile" placeholder="输入标题" />
						<view class="item-line"></view>
						<textarea class="text-aire" maxlength="-1" name="conver" @input="clickconver" placeholder="输入内容" />
						<view class="item-line"></view>
						<!-- <image class="titleImg" src="../../static/submit.PNG" form-type="submit"></image> -->
						<!-- 提交按钮 -->
						<!-- <button class="formItem submit" form-type="submit">发 送</button> -->
					</form>
				</view>
				<image src="../../static/add.png" class="addImg" @click="addFile(0)"></image>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">当前选择</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{ date }}</view>
							</picker>
						</view>
					</view>
				</view>
				<block v-for="(item, index) in imgArry" :key="index">
					<image mode="aspectFit" class="img-item" :src="item"></image>
					<view class="item-line"></view>
				</block>
				<block v-for="(item, index) in videoArry" :key="index">
					<video :src="item" mode="aspectFit"></video>
					<view class="item-line"></view>
				</block>
			</view>
		</view>

		<view>
			<xy-dialog :is_show="showDialog" :isShowCancel="!showDialog" confirmText="取消" @confirmButton="clickConfirm">
				<button @click="addImage">添加图片</button>
				<button @click="addVideo">添加视频</button>
			</xy-dialog>
		</view>
		<!-- 删除确认弹窗 -->
		<!-- <xy-dialog title="提示" content="确认删除此文件" :is_show="showDialog_del" @cancelButton="clickCancel_del" @confirmButton="clickConfirm_del"></xy-dialog> -->
	</view>
</template>

<script>
import app from '../../appcould.js';
const myCloud = uniCloud.init({
	provider: 'aliyun',
	spaceId: '10081a52-2d1e-4c0a-8113-5272c7eed9c4',
	clientSecret: 'CUU3veYBCQAskcVep2kgbA=='
});
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			showDialog: false,
			// showDialog_del: false,
			titile: '',
			conver: '',
			imgArry: [],
			videoArry: [],
			del_index: '',
			del_type: '',
			date: currentDate,

			years: '',
			months: '',
			days: ''
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		// clickCancel_del() {
		// 	this.showDialog_del = false;
		// },
		// clickConfirm_del() {
		// 	this.showDialog_del = false;
		// 	let arry = [];
		// 	if (this.del_type == 0) {
		// 		arry = this.imgArry;
		// 	} else if (this.del_type == 1) {
		// 		arry = this.videoArry;
		// 	}
		// 	arry.remove(this.del_index);
		// 	this.del_index = '';
		// 	this.del_type = '';
		// },
		clicktitile(e) {
			console.log(e);
			this.titile = e.detail.value;
		},
		clickconver(e) {
			console.log(e);
			this.conver = e.detail.value;
		},
		clickConfirm() {
			this.showDialog = false;
		},
		addFile(e) {
			console.log(e);
			this.showDialog = true;
			console.log(e);
		},
		addImage() {
			var that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					console.log(res.tempFilePaths[0]);
					app.uploadFile(res.tempFilePaths[0], res => {
						if (res.success) {
							that.imgArry.push(res.fileID);
						}
					});

					console.log(that.imgArry);
				}
			});
			this.showDialog = false;
		},
		addVideo() {
			var that = this;
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera', 'album'],
				success: function(res) {
					console.log(res);
					uni.showLoading({
						title: '加载中'
					});
					app.uploadFile(res.tempFilePath, data => {
						console.log(data);
						if (data.success) {
							uni.hideLoading();
							that.videoArry.push(data.fileID);
						}
					});
				}
			});
			this.showDialog = false;
		},
		submit(e) {
			let that = this;
			let formDate = e.detail.value;
			console.log(e);
			if (!this.titile) {
				uni.showToast({
					title: '请输入标题！',
					icon: 'none'
				});
			} else if (!this.conver) {
				uni.showToast({
					title: '请输入内容！',
					icon: 'none'
				});
			} else {
				let imgArryId;
				let vidArryId;

				this.submit_day(this.imgArry, this.videoArry);
			}
		},
		submit_day(imgArryId, vidArryId) {
			console.log(imgArryId);
			console.log(vidArryId);
			let that = this;
			let dates = this.date.split('-');
			console.log(dates);
			let datasub = {
				titile: that.titile,
				conver: that.conver,
				year: dates[0],
				month: dates[1],
				day: dates[2]
			};
			if (imgArryId) {
				datasub.img_id = imgArryId;
			}
			if (vidArryId) {
				datasub.vid_id = vidArryId;
			}
			app.callFunction(
				'add_diary',
				datasub,
				(data, result) => {
					console.log(result);
					if (result.success) {
						uni.showModal({
							title: '提示',
							content: '保存成功！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								}
							}
						});
					} else {
						uni.showToast({
							title: '保存失败！' + res.message,
							icon:'none'
						});
						uni.navigateBack({});
					}
				},
				true
			);
		},
		seeImg(index) {
			this.del_index = index;
			this.del_type = 0;
			this.showDialog_del = true;
		},
		seeVid(index) {
			this.del_index = index;
			this.del_type = 1;
			this.showDialog_del = true;
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.years = year - 2;
			this.months = month;
			this.days = day;

			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style lang="less">
page {
	// background-color: #ffeefe; /* 页面背景色 */
}
.page {
	display: flex;
	flex-direction: column;
	box-sizing: bo rder-box;
	min-height: 100%;
	height: auto;
}

.curved_box {
	display: inline-block;
	display: inline;
	width: 600rpx;
	margin: 80rpx;
	height: auto;
	background-color: #fdf5e5;
	border: 1px solid #eee;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	position: relative;
	zoom: 1;
}

.curved_box:before {
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
	left: 15px;
}
.curved_box:after {
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
	right: 15px;
}

.curved_box:before,
.curved_box:after {
	width: 70%;
	height: 55%;
	content: ' ';

	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

	position: absolute;
	bottom: 10px;
	z-index: -1;
}
.img {
	width: 260rpx;
	height: 260rpx;
	border-radius: 90rpx;
	margin-top: 10rpx;
}
.img-item {
	width: 400rpx;
	height: 800rpx;
	margin-left: 20rpx;
}
.text_cover {
	.text-center {
		text-align: center;
	}
	.titleImg {
		height: 60rpx;
		width: 120rpx;
		margin-top: 10rpx;
		margin-left: 400rpx;
	}
	.addImg {
		height: 200rpx;
		width: 200rpx;
		margin-left: 170rpx;
	}
	.textImg {
		height: 160rpx;
		width: 380rpx;
		margin-left: 80rpx;
	}
	.loveImg {
		height: 450rpx;
		width: 450rpx;
		margin-left: 40rpx;
	}
	.footerBtn {
		.footerWriteImg {
			height: 60rpx;
			width: 200rpx;
			margin-left: 40rpx;
		}
		.footerReadImg {
			height: 60rpx;
			width: 200rpx;
			margin-left: 40rpx;
		}
	}
	.loveText {
		font-size: 36rpx;
		font-family: '楷体';
		margin-top: 10rpx;
		.text-2 {
			margin-left: 70rpx;
		}
	}

	//item分割线
	.item-line {
		height: 1px;
		width: 750rpx;
		transform: scaleY(0.3);
		background-color: rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	.text-aire {
		margin-left: 36rpx;
	}
	.form {
		display: block;
		.formItem {
			box-sizing: border-box;
			width: 100%;
			height: 112rpx;
			font-size: 36rpx;
			padding: 32rpx;
			margin: 20rpx 0;
			border-radius: 56rpx;
			&.submit {
				// color: #ffffff;
				text-align: center;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>
